<template>
  <!-- 3D监测 -->
  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      style=""
      class="left fade_animition_left"
      :style="showLeft?'width:30% ;height: 75vh':'width:25% ;height: 75vh'"
      :class="showLeft?(isOpen?'left-open':'left-close'):(isOpen?'left-open':'left-close2')"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <!--      展开收缩按钮-->
      <div class="leftOpenOrClose" :style="showLeft?'right: -9.6%;':'right: -10.2%;'" @click="openOrClose('left')">
        <img src="../imgs/zk.png" :class="isOpen?'leftOpenOrClose-close':'leftOpenOrClose-open'"/>
      </div>
      <h6 class="l_title-s">监测类型</h6>
      <!--列表-->
      <div style="display: flex;align-items: center;justify-content: flex-start;width: 100%;flex-wrap: wrap;">
        <div v-for="item in leftTopList.typeCount || []" :key="item.name"
             style="width: 23%;padding:8px;border-radius: 10px" class='left-li common_card-bk'
             :class="item.code == changeTypes? 'common_card-bka_active' : ''">
          <div class='left-li-top' @click="changeType(item.code)">
            <p class='left-li-top-title' style="width: 100%">
              <img class="left-li-top-img" v-if="item.code === 1" src='../imgs/1.png'>
              <img v-else-if="item.code === 2" src='../imgs/2.png' class="left-li-top-img">
              <img v-else-if="item.code === 3" src='../imgs/3.png' class="left-li-top-img">
              <img v-else-if="item.code === 4" src='../imgs/4.png' class="left-li-top-img">
              <img v-else-if="item.code === 5" src='../imgs/5.png' class="left-li-top-img">
              <img v-else-if="item.code === 6" src='../imgs/6.png' class="left-li-top-img">
              <img v-else-if="item.code === 7" src='../imgs/7.png' class="left-li-top-img">
              <img v-else-if="item.code === 8" src='../imgs/8.png' class="left-li-top-img">
              <img v-else-if="item.code === 10" src='../imgs/10.png' class="left-li-top-img">
              <img v-else-if="item.code === 11" src='../imgs/11.png' class="left-li-top-img">
              <img v-else-if="item.code === 12" src='../imgs/12.png' class="left-li-top-img">
              <img v-else-if="item.code === 13" src='../imgs/13.png' class="left-li-top-img">
              <span class='num1 color2' style="display: inline-block;width: 45%;text-align: right">
                <number-change :number="item.value" style="font-size: 1rem;"></number-change>
                套
              </span>
            </p>
            <p class='float-right left-li-title-right'
               style="margin-top:0.5rem;width: 100%!important;text-align: center">
              <span>   {{item.name}}</span>
            </p>
          </div>
        </div>
      </div>
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <h6 class="l_title-s">最新数据</h6>
      <el-scrollbar class="tree_scroll">
        <dv-scroll-board :config="leftTableConfig" class="dv_table_right"/>
      </el-scrollbar>

    </dv-border-box-13>
    <!--    中间tabs-->
    <tab class="tabs" @changeTypes="changeType" :tabValue="changeTypes"></tab>
    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :class="isOpenRight?'right-open':'right-close'"
      :color="['#3A506A', '#3BD5FD']"
      style="height:45vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <!--      展开收缩按钮-->
      <div class="rightOpenOrClose " @click="openOrClose('right')">
        <img src="../imgs/zk.png" :class="isOpenRight?'rightOpenOrClose-open':'rightOpenOrClose-close'"/>
      </div>
      <h6 class="l_title-s">监测统计</h6>
      <!--      总数-->
      <div v-for="item in leftTopList.mainCount || []" :key="item.name">
        <div class="card-num-box" v-if="item.name=='监测数据总量'">
          <p class="title3"> {{item.name}}</p>
          <number-scroll :number="item.value? item.value: 0"></number-scroll>
        </div>
      </div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div v-for="item in leftTopList.mainCount || []" :key="item.name">
          <div style="width: 90% !important;" class='left-li common_card-bk '
               v-if="item.name=='在线设备'||item.name=='离线设备'">
            <div class='left-li-top '>
              <p class='left-li-top-title' style="width: 70%;display: inline-block;vertical-align: middle;color: white">
                <img v-if="item.name === '在线设备'" src='../imgs/zaixian.png' style="width: 20%;vertical-align: middle; ">
                <img v-if="item.name === '离线设备'" src='../imgs/manglu.png' style="width: 20%;vertical-align: middle;">
                {{item.name}}
              </p>
              <p class='float-right left-li-title-right'
                 style="margin-top:1rem;width: 30%;display: inline-block;color: white">
              <span class='num1 color2'>
                <number-change :number="item.value" style="font-size: 1rem"></number-change>
              </span> 个
              </p>
            </div>
          </div>
        </div>
      </div>
      <div
        style="display: flex;align-items: center;justify-content: space-between;flex-wrap:wrap;width: 100%;margin-top: 20px">
        <div style="width: 32% !important" v-for="item in leftTopList.mainCount || []" :key="item.name">
          <div class='left-li common_card-bk ' style="width: 100%"
               v-if="item.name === '人工监测点'||item.name === '自动监测点'||item.name === '接入监测点'">
            <div class='left-li-top ' style="width: 100%">
              <p class='left-li-top-title' style="width: 100%;color: white">
                <img v-if="item.name === '人工监测点'" src='../imgs/rengong.png' style="width: 40%;vertical-align: middle; ">
                <img v-if="item.name === '自动监测点'" src='../imgs/auto.png' style="width: 40%;vertical-align: middle; ">
                <img v-if="item.name === '接入监测点'" src='../imgs/api.png' style="width: 40%;vertical-align: middle; ">
                <span class='num1 color2' style="margin-left: 10px">
                <number-change :number="item.value" style="font-size: 1rem"></number-change>
              </span> 个
              </p>
              <p class='float-right left-li-title-right' style="margin-top:1rem;color: #0beaeb">
                {{item.name}}
              </p>

            </div>
          </div>
        </div>

      </div>
    </dv-border-box-13>
    <picture-viewer ref="imageViewer"></picture-viewer>

    <!--    marker弹窗设置  通过缓存控制内容和显示-->
    <dv-border-box-8
      v-if="isMarker"
      style="height: 65vh"
      class="bottom_center fade_animition_center"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <el-card class="box-card">
        <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
        <div class="title ">{{markerData.monitorTypeName}}详情<span style="float: right">{{markerData.weather.weather}};{{markerData.weather.temperature}}℃;{{markerData.weather.humidity}}%</span>
        </div>
        <ul>
          <li>
            <el-row :gutter="10">
              <el-col :span="12"><span class="label_view">监测点名称：</span><span>{{markerData.name}}</span></el-col>
              <el-col :span="12"><span class="label_view">监测点类型：</span><span>{{markerData.monitorTypeName}}</span>
              </el-col>
            </el-row>
          </li>
          <li>
            <el-row :gutter="10">
              <el-col :span="12">
                <span class="label_view">预警方式： </span><span class="level_view"
                                                            :style="gradeColor(markerData.warningFlag)">{{markerData.warningFlagName}}</span>
              </el-col>
              <el-col :span="12"><span
                class="label_view">最新数据时间：</span><span>{{markerData.updateTime| formatTimer}}</span></el-col>
            </el-row>
          </li>
          <li>
            <div v-if="markerData.warningFlag">

            </div>
          </li>
        </ul>
        <picture-viewer ref="imageViewer"></picture-viewer>
      </el-card>
      <el-divider></el-divider>
      <div style="background: transparent">
        <popup-item ref="popupItem"></popup-item>

      </div>
    </dv-border-box-8>
  </div>
</template>
<script>
import {listMonitorTypeCount, queryRecentList} from '@/services/model/project-info'
import Format from '@/utils/format'
import NumberScroll from '../components/number-scroll'
import NumberChange from "../components/number-change";
import {mutations, store} from "../../../monitor/work-point.store";
import PictureViewer from '@/components/picture-viewer'
import constUrl from '@/services/env'
import Tab from '../modules/tabs.vue'
import PopupItem from '../../monitor-point/monitor-item/popup-item'

export default {
  components: {NumberScroll, NumberChange, PictureViewer, Tab, PopupItem},
  data() {
    return {
      isOpen: true,
      isOpenRight: true,
      form: {
        page: 1,
        pageSize: 10
      },
      //左边数据
      currentItemLeft: [],
      constUrl,
      changeTypes: 0,
      showLoading: true,
      leftTopList: [],
    }
  }, filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss');
    },

  },

  computed: {
    showLeft() {
      return this.$route.params.showLeft === '1'
    },
    //返回的点击地图上marker的数据
    markerData() {
      return store.marker
    },
    projectDetail() {
      return store.projectInfo
    },
    // 是否展示弹窗
    isMarker() {
      if (store.isMarker) {
        this.$nextTick(() => {
          this.$refs.popupItem.initData(this.markerData)
        })
      }
      return store.isMarker
    },
    leftTableConfig() {
      return {
        header: ['监测类型', '时间', '测点名称', '数据',],
        data: this.currentItemLeft.map(x => [
          x.monitorTypeName,
          x.createTime ? Format(new Date(x.createTime), 'yyyy-MM-dd') : '',
          `<p class="davav_p" title="${x.pointName}">${x.pointName}</p>`,
          x.recordValueName,
        ]),
        headerBGC: '#22314B',
        oddRowBGC: '#162036',
        evenRowBGC: '#222B40',
        rowNum: 8,
        headerHeight: 40,
        //第一个值用作跳转使用，把padding样式去掉，就不展示；最后一个作为查看按钮
        columnWidth: [140, 160, 180, 280,],
      }
    },
  },
  methods: {
    //关闭固定弹窗
    btnClose() {
      mutations.setState({key: "isMarker", value: false});
    },
    // 预警方式颜色
    gradeColor(val) {
      switch (val) {
        case 1:
          return 'background-color:#0DC26B;color:white'
        case 0:
          return 'background-color:#0073b7;color:white'
        case 2:
          return 'background-color:#f39c12;color:white'
        case 3:
          return 'background-color:#ff851b;color:white'
        case 4:
          return 'background-color:#e43321;color:white'
        default:
          return 'background-color:#e43321;color:white'
      }
    },
    //展开收起
    openOrClose(item) {
      if (item == 'left') {
        this.isOpen = !this.isOpen
      } else {
        this.isOpenRight = !this.isOpenRight

      }
    },
    //过滤地图数据
    changeType(value) {
      mutations.setState({key: "isMarker", value: false});
      this.changeTypes = value
      this.$emit('changeType', value)
    },
    //图标数据
    async listMonitorTypeCount(projectId) {
      let reqData = {projectId: this.$route.params.projectId, workPointId: this.$route.params.workPointId}
      let {data} = await listMonitorTypeCount(reqData)
      this.leftTopList = data
    },
    // 最新数据 表格
    async queryList() {
      let reqData = {
        projectId: this.$route.params.projectId,
        pageSize: this.form.pageSize,
        workPointId: this.$route.params.workPointId
      }
      let res = await queryRecentList(reqData)
      this.currentItemLeft = res.data ? res.data : []
      this.showLoading = false
    },
    // 路线改变
    refresh(projectId) {
      this.queryLeftChart(projectId)
    },
  },
  mounted() {
    this.listMonitorTypeCount()
    this.queryList()

  },
  activated() {

  }
}
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .left_project {
    width: 25.5rem !important; /* 392/16 */;
  }

  .dv_table_right {
    margin-top: 0.5rem /* 24/16 */;
    width: 100%;
    height: 30vh;
    overflow: hidden;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .chart_3 {
    width: 90%;
    height: 35vh;
  }

  .left-li {
    width: 23%;
    margin: 1% 1%;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 0.8rem;

    .left-li-top-img {
      width: 55%;
    }
  }

  .left .left-li .left-li-title-right {
    float: left;
    font-size: 0.55rem;
    color: #939EA3;
  }

  .left-li-bottom {
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-around;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;
  }

  .left-li-bottom::before, .left-li-bottom::after {
    content: " ";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3A506A;
    position: absolute;
    top: -0.15rem;
    z-index: 2;
  }

  .left-li-bottom::before {
    left: 0;
  }

  .left-li-bottom::after {
    right: 0;
  }

  .left .left-li .left-li-top-title img {
    width: 1.0rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 13px;

    /deep/ .el-card__body {
      padding: 0px;
      display: flex;
      align-items: center;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      padding: 10px 0;
      width: 60%;

      p {
        margin-bottom: 1vh;

      }
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      .el-progress-bar__outer {
        background-color: #9a9a9a;
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }


  .equipmentBox {
    width: 50%;
    /*display: inline-block;*/
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    font-size: 10px;
    color: #82a8f2;
  }

  .s-detail ul li span {
    font-weight: normal;
    color: #ffffff;
  }

  .project_survey {
    overflow: auto;
    word-wrap: break-word;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    text-indent: 20px;
    height: 10vh;
  }

  .tabs {
    position: absolute;
    bottom: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    height: 80px;
  }

  .right {
    .chart_1 {
      width: 100%;
      height: 30vh;
    }
  }

  // 卡片背景
  .common_card-bka_active {
    transition: all 0.28s;
    position: relative;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
    /* 颜色/线条/铁灰 */
    border: 1px dashed #3A506A;


    &::before {
      content: '';
      display: block;
      position: absolute;
      top: -1px;
      left: -1px;
      border-top: 4px solid #3A506A;
      border-left: 4px solid #3A506A;
      width: 12px;
      height: 12px;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -1px;
      right: -1px;

      border-width: 0.75rem 0.75rem 0 0;
      border-style: solid;
      border-color: transparent #3A506A transparent transparent;
      font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    }

    & {
      background: linear-gradient(92.75deg, rgba(71, 84, 111, 0.672) 0.33%, rgba(41, 56, 85, 0.72) 100.73%);

      &,
      &::before {
        border-color: #3BD5FD;
      }

      &::after {
        border-color: transparent #3BD5FD transparent transparent;
      }
    }
  }

  /deep/ .box-card {
    width: 100%;
    background: transparent;
    border-radius: 0.25rem;
    border: 1px solid #266BFF;

    .btn-close {
      float: right;
      cursor: pointer;
    }

    .label_view {
      text-align: right;
      font-size: 15px;
      font-width: 600;
      width: 120px;
      display: inline-block;
      margin-left: 10px;
      color: #0beaeb;
    }

    .level_view {
      display: inline-block;
      padding: 0px 3px;
      border-radius: 3px;
    }

    .title {
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      white-space: nowrap;
      clear: both;
      background-color: #1a253a;
      margin-bottom: 15px;
      padding: 9px;
      color: white;
      border-radius: 5px;
    }

    .el-card__body {
      background: transparent;
      padding: 0 0.625rem;
      border-radius: 0.25rem 0.25rem 0 0;
      color: #ffffff;
      font-size: 20px;
      padding-bottom: 20px;
    }

    .el-button--success {
      color: #FFF;
      background-color: #1990FE;
      border-color: #1990FE;
    }

    .info-btn {
      margin-top: 5px;
      margin-bottom: 5px;

      .btn-item {
        margin-bottom: 7px;
        margin-right: 7px;
        background-color: #1990FE;
      }

      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
    }

    ul li {
      font-size: 13px;
      line-height: 20px;

      span:first-child {
        font-weight: bold;
      }
    }
  }

  /deep/ .el-divider {
    background: white;
  }
</style>

